<script setup lang="ts">

</script>

<template>
<div style="display: flex; width: calc(100% - 60px); padding: 0px 30px; margin-top: 30px; align-items: center; justify-content: center; align-content: center;">
    <div style="width: 220px; color:#b1191a;font-family: 华文彩云; font-size: 30px; font-weight: bold; text-align: center;">
      💧简易购
    </div>
    <div style="width: calc(100% - 440px); margin-left: 40px; display: flex;">
      <div>
        <input type="text" placeholder="请输入搜索内容" style="width: 600px;display: flex; border: 2px solid #b1191a; outline:none; padding: 10.8px 16px;" />
        <div class="fontType" style="margin-top: 6px;">
          <a href="#" style="margin:10px 16px;">简易购日常</a>
          <a href="#" style="margin:10px 16px;">优惠购首发</a>
          <a href="#" class="a1" style="margin:10px 16px;">亿元优惠券</a>
          <a href="#" style="margin:10px 16px;">购机补贴</a>
          <a href="#" style="margin:10px 16px;">手机好店</a>
          <a href="#" style="margin:10px 16px;">美味土鸡</a>
          <a href="#" style="margin:10px 16px;">数码电子</a>
        </div>
      </div>
      <div>
        <span style="cursor: pointer; display: flex; color: white; background-color: #b1191a; padding: 10px 16px;">搜索</span>
        <div class="fontType" style="margin-top: 6px;"><a href="#" style="margin:10px 16px;">通信</a></div>
      </div>
    </div>
    <div class="fontType" style="width: 180px; font-size: 14px;">
      <span style="background-color: #f7f7f7; padding: 10px 16px; cursor: pointer;">
        🛒我的购物车 〉
      </span>
    </div>
 </div>

 <div style="border-bottom:2px solid #b1191a; margin-top: 20px; padding: 0px 30px; display: flex; text-align: center; align-content: center;align-items: center;">
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#" style="font-size: 20px;font-weight: bold; color: black;">品牌秒杀</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#" style="font-size: 20px;font-weight: bold; color: black;">即将售罄</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#" style="font-size: 20px;font-weight: bold; color: black;">低价超值</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">女装</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">女鞋</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">传智超市</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">全球购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">闪购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">团购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">拍卖</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">有趣</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">更多分类∨</a></span>
 </div>
 <div style="padding: 0px 30px;">
  <img src="../assets/images/bg_03.png" style="width:100%;" />
 </div>

 <div style="display: flex; padding: 0px 30px;">
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2" style="margin-right: 0px;">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
 </div>

 <div style="display: flex; padding: 0px 30px;">
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2" style="margin-right: 0px;">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
 </div>

 <div style="display: flex; padding: 0px 30px;">
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
  <div class="divTitle2" style="margin-right: 0px;">
    <img src="../assets/images/mobile.jpg" />
    <h5 style="margin: 0px;text-align: left; padding: 0px 10px;">Apple苹果    iPhone 6s Plus （A1699） 32G 金色   移动联通电信4G手机</h5>
    <p class="fontType" style="text-align: left; color: #666; padding: 0px 10px;">
      <em style="color: RGB(177,25,26);font-weight: bold;font-size: 20px;">￥6088</em> 
      <del style="color: #a4a4a4;">￥6988</del>
      <span style="float: right; margin-left: 10px;">已售<i style="color: #b1191a;"> 87% </i></span>
      <span style="float: right;"> 剩余<em style="color: #b1191a;"> 29 </em>件</span>
    </p>
    <div style="width: 100%; line-height: 60px; background-color: RGB(177,25,26); color: white;">
      立即抢购
    </div>
  </div>
 </div>

 <div>
  <div class="page fontType">
    <span class="page_num">
      <a href="#" class="pn_prev" style="margin-left: 6px;">&lt;&lt;上一页 </a>
      <a href="#" style="margin-left: 6px;">1</a>
      <a href="#" class="current" style="margin-left: 6px;">2</a>
      <a href="#" style="margin-left: 6px;">3</a>
      <a href="#" style="margin-left: 6px;">4</a>
      <a href="#" style="margin-left: 6px;">5</a>
      <a href="#" class="dotted" style="margin-left: 6px;">...</a>
      <a href="#"  class="pn_next" style="margin-left: 6px;">下一页 &gt;&gt;</a>
    </span>
    <span class="page_skip">
      共10页 到第
      <input type="text"  style="margin-left: 6px;">
      页
      <button style="margin-left: 6px;">确定</button>
    </span>
  </div>
 </div>

 <div style="height: 20px;"></div>

 
</template>
